<!-- 难题咨询  -->
<template>
	<div class="collect-panel">
		<nav-bar :back="1" :title="title"></nav-bar>
		<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
			<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
				<div class="collect">
					<div class="collect-item" v-for="item in list" :key="item.id">
						<div class="collect-info">
							<van-row type="flex" justify="space-between">
								<van-col span="3">
									<div class="author-headpic">
										<!--HeadPic-->
										<!--<van-image width="100%" height="100%" :src="require('../../assets/logo.png')">-->
										<van-image width="100%" height="100%" :src=item.HeadPic>
										</van-image>
									</div>
								</van-col>
								<van-col span="16">
									<div class="author-name">
										<!--{{'池呆呆'}}-->
										{{item.RealName}}
									</div>
									<div class="collect-time">
										{{item.AddTime}}
									</div>
								</van-col>
								<van-col span="4">
									<div class="money">
										<!--理财-->
										{{item.ClassName}}
									</div>
								</van-col>
							</van-row>
						</div>
						<div :class="'article-info ' + 'article-info-article'" @click="goProblemDetail(item.Id)">
							<div class="article-title limit-one-line">
								<!--当前作品标题文案当前作品标题文案当前作品标题文案当前作品标题文案当前作品标题文案当前作品标题文案-->
								{{item.Title}}
							</div>
							<div class="article-synopsis limit-two-line">
								<!--当前作品具体内容文案当前作品具体内容文案当前作品当前作品具体内容文案当前作品具体内容文案当前作品当前作品前作品具体内容文案当前作品具体内容文案当前作品当前作品具体内容文案当前作品具体内容文案当前作品当前作品具体-->
								{{item.Remark}}
							</div>
						</div>
					</div>
				</div>
			</van-list>
		</van-pull-refresh>
		<div class="goContribute">
			<van-row type="flex" justify="space-between">
				<van-col span="6">
					<button class="btn prem-btn my-problem" @click="goMyProblem">
						我的难题咨询
					</button>
				</van-col>
				<van-col span="6">
					<button class="btn main-btn send-problem" @click="goSendProblem">
						发布难题咨询
					</button>
				</van-col>
				<van-col span="3">
					
				</van-col>
			</van-row>
		</div>
	</div>
</template>

<script>
	import {
		Toast
	} from 'vant';

	import NavBar from '../../components/NavBar.vue';

	import {
		myProblem_api
	} from '../../api/index.js'

	export default {
		name: 'problem-consultation',
		components: {
			NavBar
		},
		data() {
			return {
				refreshing: false,
				loading: false,
				finished: false,
				pageIndex: 1,
				title: '难题咨询',
				isCollect: true,
				isShow: 1,
				list: [],
				userInfo: this.$store.getters.getUserInfo
			}
		},
		activated() {
			this.getproblemconsultlist(false)
		},
		methods: {
			onLoad() {
				setTimeout(() => {
					if (this.refreshing) {
						this.list = [];
						Toast('刷新成功');
						this.refreshing = false;
					}
					this.getproblemconsultlist();

					//for (let i = 0; i < 10; i++) {
					//	this.list.push(this.list.length + 1);
					//}
					this.loading = false;

					//if (this.list.length >= 40) {
						this.finished = true;
					//}
				}, 1000);
			},
			onRefresh() {
				// 清空列表数据
				this.finished = false;

				// 重新加载数据
				// 将 loading 设置为 true，表示处于加载状态
				this.loading = true;
				this.onLoad();
			},
			getproblemconsultlist(is_push = true) {
				this.refreshing = false
				let data = {
					PageIndex: this.pageIndex,
					IsShowAll: this.isShow
				}
				myProblem_api.getproblemconsultlist(data, (res) => {
					//console.log('getproblemconsultlist', res)
					if (this.refreshing || !is_push) {
						this.list = res
					} else {
						this.list.push(...res)
					}
					this.refreshing = false
					if (res.length < 20) {
						this.finished = true //已全部加载
					}
				})
			},
			goMyProblem() {
				this.$router.push('/myProblem-list')
			},
			goSendProblem() {
				this.$router.push('/addproblem')
			},
			goProblemDetail(id){
				this.$router.push({path:'/problem-detail',query:{id:id}})
			}
		}
	}
</script>

<style scoped>
	.collect-panel {
		padding-top: 0.88rem;
		background-color: #F6F5FB;
	}

	.collect {
		min-height: calc(100vh - 0.88rem);
		padding-top: 0.1rem;
	}

	.collect-item {
		background-color: #FFFFFF;
		margin: 0 0 0.1rem;
		padding-top: 0.36rem;
	}

	.collect-info {
		padding: 0 0.2rem;
		height: 0.76rem;
	}

	.author-headpic {
		width: 0.76rem;
		height: 0.76rem;
		margin: 0 auto;
	}

	.author-name {
		padding-left: 0.2rem;
		height: 0.4rem;
		font-size: 0.28rem;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
		line-height: 0.4rem;
	}

	.collect-time {
		padding-left: 0.2rem;
		height: 0.38rem;
		font-size: 0.24rem;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #8D8D8D;
		line-height: 0.38rem;
	}

	.article-info {
		padding: 0.2rem 0.28rem 0.2rem;
		text-align: left;
	}
	
	.article-info-article{
		padding-bottom: 0.3rem;
	}

	.article-title {
		height: 0.7rem;
		font-size: 0.28rem;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #000000;
		line-height: 0.7rem;
	}

	.article-synopsis {
		height: 0.68rem;
		font-size: 0.24rem;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 0.34rem;
	}

	.article-accessory {
		width: 6.4rem;
		height: 1.12rem;
		margin-top: 0.2rem;
		background: #F8F8F8;
		border-radius: 0.1rem;
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}
		
	.article-accessory-look{
		width: 6.96rem;
	}

	.article-type {
		width: 0.6rem;
		height: 0.6rem;
		min-width: 0.6rem;
		min-height: 0.6rem;
		margin-left: 0.24rem;
	}
	
	.article-attribute-box{
		width: 60%;
		margin-left: 0.2rem;
	}
	.article-name{
		height: 0.56rem;
		font-size: 0.28rem;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #000000;
		line-height: 0.56rem;
	}
	.article-attribute{
		height: 0.28rem;
		font-size: 0.2rem;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #A3A3A3;
		line-height: 0.28rem;
	}
	.article-look{
		height: 0.4rem;
		font-size: 0.28rem;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FE4B4B;
		line-height: 0.4rem;
		margin: 0 auto;
	}
	.money{
		color: #8A8A8A;
		background-color: #EDEDED;
		text-align: center;
		font-size: 0.25rem;
		height: 0.38rem;
		line-height: 0.38rem;
	}
	.goContribute {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		padding-bottom: constant(safe-area-inset-bottom);
		margin-bottom: 0.4rem;
	}
	.btn{
		width:2.9rem !important;
	}
	.prem-btn{
		color: #FE4B4B;
		background-color: #fff;
		border-radius: 0.1rem;
		border: 1px solid #FE4B4B;
	}
</style>
